<template>
    <div class="brandlist">
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar
                title="不凡"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            />
        </div>
        <!-- 制造商列表 -->
        <div class="list">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                    offset="150"
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    immediate-check
                    class="topic-list"
                >
                    <div
                        class="list-item"
                        v-for="(item, index) in list"
                        :key="index"
                        @click="toBrandDetail(item.id)"
                    >
                        <img :src="item.app_list_pic_url" alt="">
                        <div class="mask">
                            <p>{{item.name}} | {{item.floor_price}}起</p>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
import { getBrandlistInfo } from '@/api/home/index'

export default {
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            index: 1
        };
    },
    methods: {
        // 返回
        onClickLeft() {
            this.$router.go(-1);
        },
        //点击制造商跳转制造商详情
       // 点击跳转具体制造商
        toBrandDetail(id) {
            this.$router.push({ name: 'brandDetail', query: { id, } })
        },
        // 配合下拉加载
        onLoad() {
            if (this.refreshing) {
                this.list = [];
                this.refreshing = false;
            }
            // 请求数据
            getBrandlistInfo({page: this.index++})
            .then( res => {
                this.list = [...this.list, ...res.data];
                // console.log(this.list);
                this.loading = false;
            } )
            // 列表加载完成标识
            if (this.index == 11) {
                    this.finished = true;
                }
        },
        // 重载数据
        onRefresh() {
            // 清空列表数据
            this.finished = false;

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
        },
    },
}
</script>

<style lang="scss" scoped>
    .header{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 9;
    }
    .list{
        margin-top: 1.226667rem;
        .topic-list{
            background: #f4f4f4;
            .list-item{
                position: relative;
                width: 100%;
                height: 207.5px;
                margin-bottom: 1px;
                background: #fff;
                text-align: center;
                img{
                    width: 100%;
                    height: 207.5px;
                }
                .mask{
                    position: absolute;
                    display: flex;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, .1);
                    p{
                        margin: auto;
                        color: #fff;
                        font-size: .46667rem;
                        font-weight: 700;
                    }
                }
            }
        }
    }

</style>
